<template>
	<view class="body">
		<uni-nav-bar :fixed="true" left-icon="back" :border="false" backgroundColor="#f9f2ea" leftText="确认下单"
			:statusBar="true" @clickLeft="goBack"></uni-nav-bar>
		<view class="address-box" v-if="addressStr != ''">
			<view class="address" @click="toAddress">
				<image class="img" src="../../static/location.png" mode=""></image>
				<view class="">
					<view class="address-top flex">
						<view class="name">
							{{addressData.name}}
						</view>
						<view class="phone">
							{{addressData.phone}}
						</view>
					</view>
					<view class="address-bottom flex">
						<view class="text">
							收货地址：{{addressData.area + addressData.address}}
						</view>
					</view>
				</view>
			</view>
			<view class="logistics flex-between" >
				<view class="">
					配送方式
				</view>
				<view class="" >
					快递 {{logistics_amount == "0.00" ? "免运费" : "￥" + logistics_amount}}
				</view>
			</view>
		</view>
		<!--  -->
		<view class="address-box" v-if="addressStr == ''">
			<view class="address" @click="toAddress">
				<view class="address-top flex-between">
					<view class="name">

					</view>
					<view class="phone">

					</view>
				</view>
				<view class="address-bottom flex">
					<image class="img" src="../../static/location.png" mode=""></image>
					<view class="text">
						请选择收货地址
					</view>
				</view>
			</view>
		</view>
		<view class="goods">
			<view class="goods-item flex" v-for="(item, index) in goodArr" :key="index">
				<image class="img" :src="item.thumb" mode="aspectFit"></image>
				<view class="content">
					<view class="name">
						{{item.name || "艺术品"}}
					</view>
					<view class="introduce">
						{{item.spec_name}}
					</view>
					<view class="flex-between">
						<view class="price">
							￥{{item.price}}
						</view>
						<view class="number">
							× {{item.goods_num}}
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="points flex-between" @click="getUsableCoupon">
			<view class="">
				优惠券减免
			</view>
			<view class="" @click="getUsableCoupon()">
				{{discount_price == "" ? "选择优惠券" : "￥" + discount_price}}
			</view>
		</view>




		<view class="btn-group" @click="subscribeShow = true">
			<view class="btn cart">
				<text class="span">合计：</text>￥{{couponTotal}}
			</view>
			<view class="btn buy" @click="submit">
				提交订单
			</view>
		</view>
		<view class="mark-box" v-show="markShow">
			<view class="mark">
				<view class="text" v-if="couponList.length == 0">
					暂无可用优惠券
				</view>
				<!--   -->
				<view class="mark-item" :class="{'active': couponId == item.id}" v-for="(item, index) in couponList"
					:key="index" @click="couponChoose(item)">
					<view class="item-icon">
						<view class="round">

						</view>
					</view>
					<view class="flex">
						<view class="item-left">
							￥{{parseFloat(item.discount_price)}}
						</view>
						<view class="item-center">
							满{{parseFloat(item.total_price)}}可用<br/>
							<view class="item-right">
								到期时间
								{{item.expire_time}}
							</view>
						</view>

					</view>

				</view>
				<view class="btn" @click="markShow = false">
					{{couponId == "" ? "取消" : "使用"}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAccountData,
		createOrder,
		payOrder,
		usableCoupon
	} from "@/api/public.js"
	export default {
		data() {
			return {
				goodArr: [],
				addressData: {},
				logistics_amount: "",
				total: "",
				couponTotal: "",
				goodsStr: "",
				addressStr: "",
				couponId: "",
				discount_price: "",
				couponList: [],
				markShow: false,
				clickOnce: 0
			}
		},
		onLoad(obj) {
			console.log(obj)
			if (obj.goods) {
				this.goodsStr = obj.goods;
				uni.setStorageSync("orderGoods", this.goodsStr)
			} else {
				this.goodsStr = uni.getStorageSync("orderGoods");
			}
			if (obj.address) {
				this.addressStr = obj.address;
			} else if (uni.getStorageSync("approveAddress")) {
				this.addressStr = uni.getStorageSync("approveAddress");
			}
			this.getAccountDatas();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			getAccountDatas() {
				getAccountData(this.goodsStr, this.addressStr, this.couponId).then(res => {
					if (this.addressStr == "" && res.reData.address.name) {
						this.addressStr = JSON.stringify(res.reData.address);
						uni.setStorageSync("approveAddress", this.addressStr)
					}
					this.goodArr = res.reData.goods;
					this.addressData = res.reData.address;
					this.total = res.reData.order_amount;
					this.logistics_amount = res.reData.logistics_amount;
					this.couponTotal = this.total;
				})
			},
			toAddress() {
				uni.navigateTo({
					url: "/pages/shoppingCart/myAddress?num=1"
				})
			},
			couponChoose(item) {
				if (this.couponId == item.id) {
					this.couponId = "";
					this.discount_price = "";
					this.couponTotal = this.total;
				} else {
					this.couponId = item.id;
					this.discount_price = item.discount_price;
					this.couponTotal = (100 * this.total - 100 * this.discount_price) / 100;
				}
			},
			getUsableCoupon() {
				this.markShow = true;
				usableCoupon(this.total).then(res => {
					console.log(res)
					this.couponList = res.reData.data;
				})
			},
			submit() {
				if (this.clickOnce == 0) {
					this.clickOnce = 1
				} else {
					return false
				}
				createOrder(this.goodsStr, this.addressStr, uni.getStorageSync("accountsType"), this.couponId).then(
					data => {
						if (data.result == 0) {
							payOrder(data.reData.data.order_id).then(res => {
								console.log(res)
								uni.requestPayment({
									provider: 'wxpay',
									appid: res.reData.data.appId,
									timeStamp: "" + res.reData.data.timeStamp,
									nonceStr: res.reData.data.nonceStr,
									package: res.reData.data.package,
									signType: res.reData.data.signType,
									paySign: res.reData.data.paySign,
									success: function(res) {
										console.log('success:' + JSON.stringify(res));
										uni.reLaunch({
											url: "../mine/order"
										})
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
										uni.reLaunch({
											url: "../mine/order"
										})
									}
								});
							})
						} else {
							uni.showToast({
								title: data.message,
								icon: "none",
							})
						}
					})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.body {
		padding: 0rpx 48rpx;
	}

	.address-box {
		padding: 24rpx 30rpx;
		background: #fffaf5;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 2px 2px 4px rgba(186, 162, 138, 0.18);

		.address {
			display: flex;
			align-items: center;

			.img {
				width: 32rpx;
				height: 40rpx;
				margin-right: 30rpx;
				flex-shrink: 0;
			}

			.address-top {
				margin-bottom: 20rpx;
				align-items: flex-end;

				.name {
					font-size: 32rpx;
					color: rgba(84, 54, 54, 1);
					margin-right: 20rpx;
				}

				.phone {
					color: rgba(128, 128, 128, 1);
					font-size: 24rpx;
				}
			}

			.address-bottom {
				align-items: center;

				.text {
					color: #666;
					font-size: 28rpx;
					line-height: 38rpx;
				}
			}
		}

		.logistics {
			margin-top: 40rpx;
			color: rgba(84, 54, 54, 1);
			font-size: 28rpx;
			color: #543636;
			font-size: 24rpx;
		}
	}

	.goods {
		border-radius: 20rpx;
		overflow: hidden;

		.goods-item {

			background: #fffaf5;
			padding: 30rpx;

			box-shadow: 2px 2px 4px rgba(186, 162, 138, 0.18);

			.img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 30rpx;
				flex-shrink: 0;
			}

			.content {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: 28rpx;
					line-height: 28rpx;
					color: rgba(84, 54, 54, 1);
				}

				.introduce {
					font-size: 24rpx;
					line-height: 24rpx;
					color: rgba(212, 148, 135, 1);
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					max-height: 96rpx;
				}

				.price {
					font-size: 36rpx;
					line-height: 36rpx;
					font-weight: 700;
					color: rgba(214, 142, 127, 1);
				}

				.number {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #999;
				}
			}
		}


	}

	.points {
		box-shadow: 2px 2px 4px rgba(186, 162, 138, 0.18);
		margin-top: 30rpx;
		background: #fffaf5;
		padding: 20rpx;
		border-radius: 44rpx;
		font-size: 26rpx;
		color: rgba(84, 54, 54, 1);
		line-height: 46rpx;
		margin-bottom: 130rpx;


		.img {
			width: 46rpx;
			height: 46rpx;
		}
	}

	.btn-group {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		height: 120rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: rgba(255, 250, 245, 1);
		z-index: 10;

		.btn {
			height: 88rpx;
			font-size: 30rpx;
			line-height: 88rpx;
			color: #fff;
			

			.span {
				font-size: 28rpx;
				color: #543636;
			}

			&.cart {
				width: 400rpx;
				font-size: 38rpx;
				color: rgba(214, 142, 127, 1);
			}

			&.buy {
				text-align: center;
				width: 220rpx;
				background: #ce2e3a;
				background-color: rgba(214, 142, 127, 1);
				box-shadow: 10rpx 10rpx 20rpx rgba(189, 185, 166, 0.5);
				border-radius: 50rpx;
			}
		}
	}

	.mark-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fffaf5;
		z-index: 10;
		box-sizing: border-box;
		padding-top: 90px;

		.mark {
			box-sizing: border-box;
			height: 100%;
			padding-top: 20rpx;
			padding-bottom: 120rpx;

			.text {
				font-size: 36rpx;
				text-align: center;
				color: #333;
				line-height: 56rpx;
			}

			.mark-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto 20rpx;
				width: 700rpx;
				height: 160rpx;
				color: rgba(166, 78, 78, 1);

				.item-icon {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					margin-right: 10rpx;
					flex-shrink: 0;
					border: 2rpx solid rgba(166, 166, 166, 1);
				}

				.flex {
					flex-grow: 1;
					height: 160rpx;
					padding-left: 20rpx;
					padding-right: 20rpx;
					align-items: center;
					background-image: url(../../static/coupon_5.png);
					background-position: center;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					color: rgba(166, 78, 78, 1);
					.item-right{
						margin-top:20rpx;
						font-size:28rpx;
						color:#888;
					}

				}

				.item-left {
					margin-right: 40rpx;

					.item-left-top {
						box-sizing: border-box;
						padding: 16rpx;
						display: flex;
						justify-content: center;
						align-items: flex-end;
						height: 80rpx;

						.num {
							font-size: 48rpx;
							line-height: 48rpx;
						}

						.text {
							color: rgba(166, 78, 78, 1);
							font-size: 24rpx;
						}
					}

					.item-left-bottom {
						font-size: 22rpx;
						line-height: 40rpx;
						text-align: center;
					}
				}

				.item-center {
					margin-right: 40rpx;

					.item-center-top {
						line-height: 64rpx;
						font-weight: 700;
					}

					.item-center-bottom {
						font-size: 24rpx;
						line-height: 32rpx;
					}
				}



				&.active {
					.item-icon {
						border: 2rpx solid rgba(203, 83, 59, 1);
						display: flex;
						justify-content: center;
						align-items: center;

						.round {
							background: rgba(203, 83, 59, 1);
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							overflow: hidden;
						}
					}
				}
			}

			// .btn-group{

			.btn {
				position: absolute;
				bottom: 40rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
				width: 200rpx;
				height: 80rpx;
				background: #d68e7f;
				opacity: 1;
				border-radius: 40rpx;
				font-size: 34rpx;
				line-height: 80rpx;
				color: #fff;
				text-align: center;
				box-shadow: 5px 5px 10px rgba(189, 185, 166, 0.5);

			}

			// }
		}
	}
</style>
